<template>
  <view>
    <!-- 触发弹窗的按钮 -->
    <u-button @click="showInvitePopup = true">邀请面试</u-button>
    
    <!-- 底部弹出的面试邀请表单 -->
    <u-popup v-model="showInvitePopup" mode="bottom" border-radius="20" closeable>
      <view class="invitation-popup">
        <view class="popup-header">
          <text class="title">邀请面试</text>
        </view>
        
        <scroll-view scroll-y class="popup-content">
          <!-- 面试岗位 -->
          <view class="form-item">
            <text class="item-label">*面试岗位</text>
            <u-input v-model="form.position" placeholder="请选择岗位" type="select" 
                     @click="showPositionPicker = true" />
            <u-picker v-model="showPositionPicker" mode="selector" :range="positionOptions" 
                      @confirm="selectPosition" />
          </view>
          
          <!-- 面试时间 -->
          <view class="form-item">
            <text class="item-label">*面试时间</text>
            <u-input v-model="form.interviewTime" placeholder="面试时间" type="select" 
                     @click="showTimePicker = true" />
            <u-picker v-model="showTimePicker" mode="time" :params="timeParams" 
                      @confirm="selectTime" />
          </view>
          
          <!-- 面试地址 -->
          <view class="form-item">
            <text class="item-label">*面试地址</text>
            <u-input v-model="form.address" placeholder="请输入详细地址" />
          </view>
          
          <!-- 联系人 -->
          <view class="form-item">
            <text class="item-label">*联系人</text>
            <u-input v-model="form.contactPerson" placeholder="请输入联系人" />
          </view>
          
          <!-- 联系方式 -->
          <view class="form-item">
            <text class="item-label">*联系方式</text>
            <u-input v-model="form.contactPhone" placeholder="请输入联系电话" type="number" />
          </view>
        </scroll-view>
        
        <view class="popup-footer">
          <u-button type="primary" @click="submitInvitation">发出邀请</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showInvitePopup: false,
      showPositionPicker: false,
      showTimePicker: false,
      positionOptions: ['康养师', '护理师', '健康顾问', '康复治疗师', '营养师'],
      timeParams: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true
      },
      form: {
        position: '',
        interviewTime: '',
        address: '',
        contactPerson: '',
        contactPhone: ''
      }
    }
  },
  methods: {
    // 选择岗位
    selectPosition(e) {
      this.form.position = this.positionOptions[e[0]]
      this.showPositionPicker = false
    },
    // 选择时间
    selectTime(e) {
      this.form.interviewTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
      this.showTimePicker = false
    },
    // 提交邀请
    submitInvitation() {
      if (!this.validateForm()) return
      
      // 这里可以调用API发送邀请
      console.log('提交邀请:', this.form)
      this.$u.toast('邀请已发送')
      this.resetForm()
      this.showInvitePopup = false
    },
    // 表单验证
    validateForm() {
      if (!this.form.position) {
        this.$u.toast('请选择面试岗位')
        return false
      }
      if (!this.form.interviewTime) {
        this.$u.toast('请选择面试时间')
        return false
      }
      if (!this.form.address) {
        this.$u.toast('请输入面试地址')
        return false
      }
      if (!this.form.contactPerson) {
        this.$u.toast('请输入联系人')
        return false
      }
      if (!this.form.contactPhone) {
        this.$u.toast('请输入联系电话')
        return false
      }
      if (!/^1[3-9]\d{9}$/.test(this.form.contactPhone)) {
        this.$u.toast('请输入正确的手机号码')
        return false
      }
      return true
    },
    // 重置表单
    resetForm() {
      this.form = {
        position: '',
        interviewTime: '',
        address: '',
        contactPerson: '',
        contactPhone: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.invitation-popup {
  height: 70vh;
  display: flex;
  flex-direction: column;
  
  .popup-header {
    padding: 30rpx;
    text-align: center;
    border-bottom: 1rpx solid #f5f5f5;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
    }
  }
  
  .popup-content {
    flex: 1;
    padding: 30rpx;
    overflow-y: auto;
  }
  
  .popup-footer {
    padding: 20rpx;
    border-top: 1rpx solid #f5f5f5;
  }
  
  .form-item {
    margin-bottom: 30rpx;
    
    .item-label {
      display: block;
      margin-bottom: 10rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  /deep/ .u-input {
    padding: 20rpx;
    background-color: #f5f5f5;
    border-radius: 8rpx;
  }
}
</style>